<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>图书馆座位预约系统</title>
    <script type="text/javascript" src="{{ basepath }}static/js/jquery.js"></script>
{#    京润#}
{#    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=QQvatbqdGC0gq0njIPkqFzHzWI3HBfFU"></script>#}
{#    梁林#}
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=3sl1UY1y7VdsOfWgzRROstjzEpGTI6Z0"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <!--plugin-->
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .menu{
            width:100%;
            min-width: 1200px;
            height:auto;
            background-image:url("../library/static/img/index_img.jpg");
            background-repeat:no-repeat;
            padding: 50px 15px;
            margin-bottom: 30px;
            box-sizing: border-box;
        }
        .header {
            font-family:"楷体";
            text-align:center;
            font-size:70px;
            color:#666167;
            font-weight:900;
            margin:30px 0;
        }
        .content p {
            text-align:center;
            font-size:30px;
            color:white;
        }
        .span1 {
            display:inline-block;
             width:20%;
             line-height:1000%;
            margin : 0 0 15px;
             background-color:rgba(129, 118, 118, 0.73);
        }
        .span2 {
            display:inline-block;
             width:20%;
             line-height:1000%;
             background-color:rgba(139, 122, 107, 0.77);
            margin : 0 0 15px;
        }
        .span3 {
            display:inline-block;
             width:20%;
             line-height:1000%;
             background-color:rgba(133, 162, 172, 0.78);
            margin : 0 0 15px;
        }
        .span4 {
             display:inline-block;
             width:20%;
             line-height:1000%;
             background-color:rgba(108, 132, 151, 0.71);
            margin : 0 0 15px;
        }
        .span5 {
            display:inline-block;
             width:20%;
             line-height:1000%;
             background-color:rgba(23, 160, 156, 0.61);
            margin : 0 0 15px;
        }
        .span6 {
            display:inline-block;
             width:20%;
             line-height:1000%;
             background-color:rgba(149, 124, 100, 0.71);
            margin : 0 0 15px;
        }
        .span7 {
            display:inline-block;
             width:20%;
             line-height:1000%;
             background-color:rgba(123, 102, 88, 0.58);
            margin : 0 0 15px;
        }
        .span8 {
            display:inline-block;
             width:20%;
             line-height:1000%;
             background-color:rgba(108, 160, 156, 0.61);
            margin : 0 0 15px;
        }
        ul.news{
            width:81%;
            min-width:1200px;
            height: auto;
            margin:0 auto;
        }
        ul.news li{
             min-width:100%;
             height:300px;
             -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
             box-sizing: border-box;
             padding:30px;
             list-style: none;
             display:flex;
             flex-wrap: wrap;
             background-color: rgba(255,255,255,.6);
            border:1px solid #eee;
            margin-bottom: 30px;
         }
         ul.news li .img{
             width:20%;
             height:100%;
             overflow: hidden;
         }
        ul.news li .img img{
            width:100%;
            height: 100%;
        }
        ul.news li div.text{
            width: 74%;
            padding-left: 30px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
         ul.news li div.text p:nth-of-type(1){
             font-size: 32px;
             font-weight: 700;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             /*line-height: 60px;*/
             /*padding: 5px 0 15px 0;*/
         }
         ul.news li div.text p:nth-of-type(2){
            text-align: justify;
            font-size: 18px;
            color:#666;
             height: 100px;
             overflow:hidden;
         }
        ul.news li div.text a{
            line-height:60px;
        }
        .qd_box{
            width: 81%;
            margin: 30px auto;
            border: 1px solid #eee;
            background-color: aliceblue;
            border-radius: 4px;
            padding: 30px;
            box-sizing: border-box;
            text-align: center;
            font-size: 20px;
            color: #333;
            line-height: 40px;
        }
        .qd_box button{
            width:120px;
            line-height: 40px;
            border:none;
            background-color: #286090;
            color: #ffffff;
            font-size: 20px;
            border-radius: 2px;
            margin-top: 30px;
        }
        .qd_box button:not(:last-child){
            margin-right: 30px;
        }
    </style>
</head>
<body>
<!-------------------------------------- 内容开始 -------------------------------------->
<main>
    <div class="menu">
        <P align="right" style="font-size: 20px;text-align: right;">你好，{{ student_data[0].name }}同学</P>
        <div class="header">
            <p>图书馆座位预约系统</p>
        </div>


        <div class="content">
            <p>
                <a  href="{{ basepath }}/library/seat_res" style="color:white;text-decoration:none"><span class="span1">预约座位</span></a>
                <a  href="{{ basepath }}/library/jdzz" style="color:white;text-decoration:none"><span class="span2">监督占座</span></a>
                <a  href="{{ basepath }}/library/syjl" style="color:white;text-decoration:none"><span class="span6">使用记录</span></a>
                <a  href="{{ basepath }}/library/jfrw" style="color:white;text-decoration:none"><span class="span7">积分任务</span></a>
            </p>
            <p>
                <a  href="{{ basepath }}/library/jfsc" style="color:white;text-decoration:none"><span class="span3">积分商城</span></a>
                <a  href="{{ basepath }}/library/phb" style="color:white;text-decoration:none"><span class="span4">排行榜</span></a>
                <a  href="{{ basepath }}/library/wgjl" style="color:white;text-decoration:none"><span class="span8">违规记录</span></a>
                <a  href="{{ basepath }}/person/grzx" style="color:white;text-decoration:none"><span class="span5">个人中心</span></a>
            </p>
        </div>
    </div>
    <div id="allmap"></div>
    <form class="qd_box">
        {% if yy_num == 1 %}
            <p>您预约的座位是</p><p>{{yyy_data[0].room}} {{yyy_data[0].zwh}}</p>
            <p>请在{{yyy_data[0].booking_time}}前到达图书馆签到</p>
            <button type="button" onclick="wz_check()">签到</button>
            <!--<button type="button" onclick="qd_check()">签到</button>-->
            <button type="button" onclick="qx_check()">取消预约</button>
        {% elif qd_num == 1 %}
            <p>您的座位是</p><p>{{yqd_data[0].room}} {{yqd_data[0].zwh}}</p>
            <button type="button" onclick="tz_check()">退座</button>
        {% else %}
            <p>您还没有预约座位，请前往预约模块预约座位</p>
        {% endif %}
    </form>
    <ul class="news">
        {% for news_data in news_data %}
        <li>
            <div class="img" ><img src="{{ news_data.head_pic }}" alt=""></div>
            <div class="text">
                <p>{{ news_data.title }}</p>
                <p>{{ news_data.introduce}}</p>
                <a href="{{basepath}}/library/news?model_id={{ news_data.id }}">查看全文</a>
            </div>
        </li>
        {% endfor %}
    </ul>

</main>
<!-------------------------------------- 内容结束 -------------------------------------->
<!-------------------------------------- 尾部开始 -------------------------------------->
<footer>
    <div class="container">

    </div>
</footer>
<!-------------------------------------- 尾部开始 -------------------------------------->
</body>
</html>
<style>

</style>
<script>
    $(function () {

    });
    $(function () {
        $(".item").click(function () {
            window.location.href = '{{basepath}}news';
        });
    });

    function qd_check() {
        var confirm = wz_check();
        if (confirm){
            $.ajax({
                type: "post",
                url: "{{ basepath }}qd_check",
                dataType: "json",
                data:1,
                success: function (data) {
                    alert('签到成功');
                    window.location.reload()
                    console.log(data);
                }
            });
        }
    }

     function qt_check() {
        $.ajax({
            type: "post",
            url: "{{ basepath }}qt_check",
            dataType: "json",
            data:1,
            success: function (data) {
                alert('您已成功退座');
                window.location.reload()
                console.log(data);
            }
        });
    }

    function qx_check() {
        $.ajax({
            type: "post",
            url: "{{ basepath }}qx_check",
            dataType: "json",
            data:1,
            success: function (data) {
                alert('您已取消预约');
                window.location.reload()
                console.log(data);
            }
        });
    }

    //登录验证位置
    function wz_check(){
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.331398,39.897445);
        var lng =0;
        var lat=0;
        map.centerAndZoom(point,12);
        var geolocation = new BMap.Geolocation();

        map.addControl(new BMap.OverviewMapControl());         //略缩图控件
        map.addControl(new BMap.ScaleControl({offset: new BMap.Size(75, 500)}));
        //比例尺控件
        map.addControl(new BMap.MapTypeControl());
        map.clearOverlays();//清除地图上的覆盖物
        var apolygon_points = new Array();
        {#京润#}
        {#apolygon_points.push(new BMap.Point(120.7604277,30.77399224));#}
        {#apolygon_points.push(new BMap.Point(120.7654953003,30.7728877531));#}
        {#apolygon_points.push(new BMap.Point(120.7641649246,30.7701591158));#}
        {#梁林,,,,120.7604277,30.77399224 ,,#}
        apolygon_points.push(new BMap.Point(120.7553897893,30.7797832935));
        apolygon_points.push(new BMap.Point(120.7650434518,30.7790997912));
        apolygon_points.push(new BMap.Point(120.7604277000,30.7739922400));
        var apolygon = new BMap.Polygon(apolygon_points, {
            strokeColor: "red",
            strokeWeight: 2,
            strokeOpacity: 0.5,
            fillOpacity: 0.4
        });
        map.addOverlay(apolygon);
        var opt = {position: new BMap.Point(117.338937, 31.880068), offset: new BMap.Size(0, 0)};
        var lname = "图书馆"
        var label = new BMap.Label(lname, opt);
        map.addOverlay(label);

        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                lng = r.point.lng;
                lat = r.point.lat;
                alert('您的位置：'+r.point.lng+','+r.point.lat);

                var msg = "";
                var pt = new BMap.Point(lng,lat);
                map.addOverlay(new BMap.Marker(pt));
                if (BMapLib.GeoUtils.isPointInPolygon(pt, apolygon)) {//如果点在区域内，返回true
                    map.addOverlay(new BMap.Marker(pt));
                    msg = "在" + lname + "区域内";
                    // alert(msg);
                    $.ajax({
                        type: "post",
                        url: "{{ basepath }}qd_check",
                        dataType: "json",
                        data:1,
                        success: function (data) {
                            alert('签到成功');
                            window.location.reload()
                            console.log(data);
                        }
                    });
                }
                else {
                    map.addOverlay(new BMap.Marker(pt));
                    msg = "在" + lname + "区域外";
                    alert(msg);
                }
            }
            else {
                alert('failed'+this.getStatus());
            }
        },{enableHighAccuracy: true});


    }

    // 退座
    function tz_check(){
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.331398,39.897445);
        var lng =0;
        var lat=0;
        map.centerAndZoom(point,12);
        var geolocation = new BMap.Geolocation();

        map.addControl(new BMap.OverviewMapControl());         //略缩图控件
        map.addControl(new BMap.ScaleControl({offset: new BMap.Size(75, 500)}));
        //比例尺控件
        map.addControl(new BMap.MapTypeControl());
        map.clearOverlays();//清除地图上的覆盖物
        var apolygon_points = new Array();
        {#apolygon_points.push(new BMap.Point(120.7604277,30.77399224));#}
        {#apolygon_points.push(new BMap.Point(120.7654953003,30.7728877531));#}
        {#apolygon_points.push(new BMap.Point(120.7641649246,30.7701591158));#}
        {#梁林#}
        apolygon_points.push(new BMap.Point(120.7553897893,30.7797832935));
        apolygon_points.push(new BMap.Point(120.7650434518,30.7790997912));
        apolygon_points.push(new BMap.Point(120.7604277000,30.7739922400));
        var apolygon = new BMap.Polygon(apolygon_points, {
            strokeColor: "red",
            strokeWeight: 2,
            strokeOpacity: 0.5,
            fillOpacity: 0.4
        });
        map.addOverlay(apolygon);
        var opt = {position: new BMap.Point(117.338937, 31.880068), offset: new BMap.Size(0, 0)};
        var lname = "图书馆"
        var label = new BMap.Label(lname, opt);
        map.addOverlay(label);

        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                lng = r.point.lng;
                lat = r.point.lat;
                alert('您的位置：'+r.point.lng+','+r.point.lat);

                var msg = "";
                var pt = new BMap.Point(lng,lat);
                map.addOverlay(new BMap.Marker(pt));
                if (BMapLib.GeoUtils.isPointInPolygon(pt, apolygon)) {//如果点在区域内，返回true
                    map.addOverlay(new BMap.Marker(pt));
                    msg = "在" + lname + "区域内";
                    // alert(msg);
                    $.ajax({
                        type: "post",
                        url: "{{ basepath }}qt_check",
                        dataType: "json",
                        data:1,
                        success: function (data) {
                            alert('您已成功退座');
                            window.location.reload()
                            console.log(data);
                        }
                    });
                }
                else {
                    map.addOverlay(new BMap.Marker(pt));
                    msg = "在" + lname + "区域外";
                    alert(msg);
                }
            }
            else {
                alert('failed'+this.getStatus());
            }
        },{enableHighAccuracy: true});


    }


</script>

